<!--下拉表格弹窗_seo文案 -->
<template>
  <div>
<!--    <div>lists&#45;&#45;{{lists}}</div>-->
<!--    popper-class 弹框class
    :popper-width="500"
-->
    <ele-table-select
      id="tableSelect"
      :hideOnSinglePage="true"
      popper-class="select-display"
    @select="selectVideo"
    @clear="selectVideo"
    ref="select"
    v-model="form.seoCopywritingId"
    :clearable="true"
    placeholder="请选择文案"
    value-key="id"
    label-key="taticsName"
    :table-config="tableConfig"
    :popper-width="popWidth"
  >
    <!-- 角色列 -->
    <template v-slot:roles="{ row }">
      <el-tag
        v-for="item in row.roles"
        :key="item.roleId"
        size="mini"
        type="primary"
        :disable-transitions="true"
      >
        {{ item.roleName }}
      </el-tag>
    </template>
  </ele-table-select></div>
</template>

<script>
  import {projectPage} from "@/api/creatCenter/authoringClips";
  export default {
    name: "connected-activities",
    props:{
      lists:Array,
      types:Number
    },
    data() {
      return {
        // popWidth:document.body.clientWidth * 0.3 - 120,
        popWidth:0,
        form:{
          seoCopywritingId:''
        },
        // 回显值
        initValue: undefined,
        // 表格配置
        tableConfig: {
          // 传值进入
          datasource: this.lists,
          columns: [
            {
              prop: 'taticsName',
              label: 'seo文案',
              sortable: 'custom',
              showOverflowTooltip: true,
              align: 'center',
            }
          ],
          layout:"prev, pager, next",  //是否，展示页数，和跳转等
          toolbar: false,
          pageSize: 10,
          pageSizes: [ 5, 10, 15, 20],
          size: 'small',
          hideOnSinglePage: true  //只有一页时，是否隐藏分页
        },
      }
    },
    methods:{
      init(id){
        if(id){
          this.$set(this.form,'seoCopywritingId',id)
        }
        console.log("this.form,'seoCopywritingId",this.form.seoCopywritingId)
        this.popWidth= document.getElementById("tableSelect").offsetWidth;
        this.tableConfig.datasource=[]
        this.tableConfig.datasource=this.lists
      },
      // 选择 视频素材
      selectVideo(e){
        console.log('选择 视频素材',e)
        if(e){
          this.form.seoCopywritingId=e.id //剪辑工程ID
        }
        // clear事件进入
        else{
          this.form.seoCopywritingId=''  //剪辑工程ID
          // this.hint=''
        }
        this.$emit('getData', e) // 修改
      },
      clear(){
        this.form.seoCopywritingId=null
      }
    }
  }
</script>

<style scoped lang="less">
</style>
